<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位练习-莲花-绝对定位</title>
  <link rel="stylesheet" href="../css/index.css">
  <style>
       .container{
          position: relative;
          border: 1px solid;
         height: 270px;
        }

       .box-1{
           position: absolute;
           left: 80px;
           top: 90px;
           z-index:9;
       }

       .box-2{
          position: relative;
          z-index:19;
       }

       .box-3{
         position: absolute;
         left: 160px;
         top: 0;

       }

       .box-4{
         position: absolute;
         top: 160px;
       }

       .box-5{
           position: absolute;
           left: 160px;
         top: 160px;
       }

       .container .box-1{

       }
  </style>
</head>
<body>

   <div class="container">
     <div class="box success box-1">1</div>
     <div class="box danger box-2">2</div>
     <div class="box info box-3">
         <div class="box-1"></div>
         3</div>
     <div class="box primary box-4">4</div>
     <div class="box warning box-5">5</div>
   </div>


<div class="box-1">

</div>
</body>
</html>